<template>
  <div>
    <el-calendar >
      <template slot="dateCell" slot-scope="{ data }" class="calItem">
        <div
          :class="data.isSelected ? 'is-selected' : ''"
          @click="calClick(data)">
          <el-popover
          title="标题"
          trigger="hover">
          <template #reference>
          <p class="dayItem" v-if="data.day.substr(-2) < 10" @click="dialogVisible = true">
            {{ data.day.substr(-1) }}
          </p>
          <p class="dayItem" v-else>{{ data.day.substr(-2) }}</p>
          <div v-for="(item, index) in calendarData" :key="index">
            <div
              v-if="
                item.years.indexOf(data.day.split('-').slice(0)[0]) != -1 &&
                item.months.indexOf(data.day.split('-').slice(1)[0]) != -1 &&
                item.days.indexOf(data.day.split('-').slice(2).join('-')) != -1
              "
            >
              <!-- 日程上方 -->
              <el-tooltip :content="item.things" placement="right">
                <p class="mark">{{ item.things }}</p>
              </el-tooltip>
            </div>
            <div v-else></div>
          </div>
          <p
            class="addBtn"
            v-show="data.isSelected == true"
            @click="dialogVisible = true">
            添加课程
          </p>
          </template>
          <el-table :data="gridData">
            <el-table-column width="150" property="on_time" label="时间"></el-table-column>
            <el-table-column width="100" property="name" label="课程"></el-table-column>
            <el-table-column width="100" property="note" label="备注"></el-table-column>
          </el-table>
          </el-popover>
        </div>
        
      </template>
    </el-calendar>
      <el-dialog
      :title="formData.data"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose"
      :modal="false"
    >
      <el-form @submit.native.prevent>
        <el-form-item label="课程名称">          
            <el-input v-model="formData.content" placeholder="请添加课程" class="inputa"></el-input>
            <el-input v-model="formData.content" placeholder="请添加教师" class="inputa"></el-input>
        </el-form-item>
        
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="
            dialogVisible = false;
            add();
          "
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props:{
    data:{
      type:Number,
      default:() =>''
    }
  },
  name: "calendar",
  data() {
    return {
      gridData: [],
      value1: "",
      value2: "",
      formData: {
        data: "",
        content: "",
      },
      dialogVisible: false,
      calendarData: [
        { years: ["2020"], months: ["08", "11"], days: ["14"], things: "" },
        {
          years: ["2019"],
          months: ["10", "11"],
          days: ["02"],
          things: "",
        },
        { years: ["2020"], months: ["11"], days: ["02"], things: "" },
        { years: ["2019"], months: ["11"], days: ["02"], things: "" },
        { years: ["2020"], months: ["07"], days: ["15"], things: "" },
      ],
      value: new Date(),
    };
  },
  created(){
    this.Lists();
  },
  methods: {
    async Lists(){
      console.log("this.classId",this.classId);
      let a = (await this.$api.home.courseLists({
        cid:this.classId
      })).data.data
      this.gridData = a
      console.log("this.gridData",this.gridData);
    },
    calClick(item) {
      console.log(item);
      this.formData.data = item.day;
    },
    handleClose(done) {
      done();
    },
    add() {
      var date = this.formData.data.split("-");
      var a = {
        years: [date[0]],
        months: [date[1]],
        days: [date[2]],
        things: this.formData.content,
      };
      this.calendarData.push(a);
    },
  },
};
</script>
<style scoped>
.calendar-day {
  text-align: center;
  color: #202535;
  line-height: 30px;
  font-size: 12px;
}
.is-selected {
  color: #f8a535;
}
.mark {
  color: #f8a535;
}
#calendar
  .el-button-group
  > .el-button:not(:first-child):not(:last-child):after {
  content: "当月";
}
.el-backtop,
.el-calendar-table td.is-today {
  color: #f8a535 !important;
}
.calItem {
  /* font-size: 20px */
  overflow: hidden;
}
</style>
<style lang="less">
.abcd {
  margin-bottom: 20px;
}
.dayItem {
  text-align: center;
}
.addBtn {
  text-align: center;
}
.el-tooltip .mark {
  text-align: center;
}
.inputa{
  width: 150px;
}
</style>